<template>
  <div class="order-container">
    <el-card class="order-card">
      <!-- 返回导航 -->
      <div class="header-nav">
        <el-button
            type="primary"
            icon="el-icon-back"
            @click="goBack"
            class="back-btn"
        >
          返回首页
        </el-button>
      </div>

      <!-- 搜索工具栏 -->
      <div class="header-toolbar">
        <el-input
            v-model="searchKeyword"
            placeholder="搜索订单号或客户名称"
            prefix-icon="el-icon-search"
            class="search-input"
            clearable
        />

        <el-select
            v-model="filterStatus"
            placeholder="全部状态"
            clearable
            class="status-filter"
        >
          <el-option
              v-for="status in statusOptions"
              :key="status.value"
              :label="status.label"
              :value="status.value"
          />
        </el-select>
      </div>

      <!-- 订单表格 -->
      <el-table
          :data="filteredOrders"
          stripe
          style="width: 100%; margin-top: 20px;"
          v-loading="loading"
      >
        <el-table-column prop="orderNo" label="订单号" width="180" />
        <el-table-column prop="date" label="日期" width="120" sortable />
        <el-table-column prop="customer" label="客户" width="150" />
        <el-table-column label="金额" width="120" sortable>
          <template slot-scope="scope">
            ¥{{ scope.row.amount.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column label="状态" width="120">
          <template slot-scope="scope">
            <el-tag
                :type="statusType[scope.row.status]"
                size="small"
                effect="dark"
            >
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
                type="text"
                icon="el-icon-document"
                @click="viewDetail(scope.row)"
            >
              详情
            </el-button>
            <el-button
                type="text"
                icon="el-icon-close"
                @click="cancelOrder(scope.row)"
                v-if="scope.row.status === '待付款'"
                style="color: #F56C6C;"
            >
              取消
            </el-button>
            <el-button
                type="text"
                icon="el-icon-truck"
                @click="markShipped(scope.row)"
                v-if="scope.row.status === '待发货'"
                style="color: #409EFF;"
            >
              发货
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalOrders"
      />
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      searchKeyword: '',
      filterStatus: '',
      currentPage: 1,
      pageSize: 10,
      statusOptions: [
        { value: '待付款', label: '待付款' },
        { value: '待发货', label: '待发货' },
        { value: '已发货', label: '已发货' },
        { value: '已完成', label: '已完成' }
      ],
      statusType: {
        '待付款': 'danger',
        '待发货': 'warning',
        '已发货': 'primary',
        '已完成': 'success'
      },
      orders: [
        {
          orderNo: 'DD202310001',
          date: '2023-10-01',
          customer: '张三',
          amount: 256.5,
          status: '待付款'
        },
        {
          orderNo: 'DD202310002',
          date: '2023-10-02',
          customer: '李四',
          amount: 1280.0,
          status: '待发货'
        },
        {
          orderNo: 'DD202310003',
          date: '2023-10-03',
          customer: '王五',
          amount: 599.0,
          status: '已发货'
        },
        {
          orderNo: 'DD202310004',
          date: '2023-10-04',
          customer: '赵六',
          amount: 299.0,
          status: '已完成'
        }
      ]
    }
  },
  computed: {
    filteredOrders() {
      return this.orders.filter(order => {
        const matchKeyword = order.orderNo.includes(this.searchKeyword) ||
            order.customer.includes(this.searchKeyword)
        const matchStatus = this.filterStatus ? order.status === this.filterStatus : true
        return matchKeyword && matchStatus
      }).slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    },
    totalOrders() {
      return this.orders.length
    }
  },
  methods: {
    goBack() {
      if (window.history.length > 1) {
        this.$router.go(-1)
      } else {
        this.$router.push('/home')
      }
    },
    viewDetail(order) {
      this.$message.info(`查看订单详情：${order.orderNo}`)
    },
    cancelOrder(order) {
      this.$confirm('确定要取消此订单吗？', '提示', {
        type: 'warning'
      }).then(() => {
        order.status = '已取消'
        this.$message.success('订单已取消')
      })
    },
    markShipped(order) {
      order.status = '已发货'
      this.$message.success('订单状态已更新为已发货')
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

<style scoped>
.order-container {
  padding: 30px;
  background: #f5f7fa;
  min-height: 100vh;
}

.order-card {
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.header-nav {
  margin-bottom: 20px;
}

.back-btn {
  padding: 12px 25px;
  border-radius: 8px;
  transition: all 0.3s;
}

.back-btn:hover {
  transform: translateX(-5px);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.header-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}

.search-input {
  width: 300px;
}

.status-filter {
  width: 200px;
}

.pagination {
  margin-top: 25px;
}

::v-deep .el-table th {
  background-color: #f8f9fa;
  font-weight: 600;
}

::v-deep .el-button--text {
  padding: 8px 12px;
}

@media (max-width: 768px) {
  .order-container {
    padding: 15px;
  }

  .header-toolbar {
    flex-direction: column;
  }

  .search-input,
  .status-filter {
    width: 100%;
  }

  .back-btn {
    width: 100%;
    margin-bottom: 15px;
  }
}
</style>